<template>
	<!-- 页面主容器采用card布局-->
	<!-- el-card-flex是在style/common.scss中封装的弹性盒子模型 -->
	<el-card class="box-card el-card-flex">
		<!-- 标题栏，一般采用图标+文字的方式，可自定义显示内容 -->
		<div slot="header" class="clearfix">
			<span>
				<i class="el-icon-medal"></i>
				角色管理
			</span>
		</div>
		<!-- 查询信息（表单组件）-->
		<div class="text item">
			<!-- inline=true，设置表单在一行显示 -->
			<!-- model为绑定的数据模型-->
			<!-- @submit.native.prevent不可缺省，其作用是阻止表单默认回车提交，刷新页面的事件 -->
			<el-form :inline="true" :model="formSearch" class="demo-form-inline" @submit.native.prevent>
				<el-form-item label="">
					<!-- v-model绑定数据模型中对应的字段 -->
					<el-input clearable v-model="formSearch.fuzzyfield" placeholder="请输入角色编码/名称" style="width:240px;"
					 @keyup.enter.native="searchRoleTable" @clear="searchRoleTable">
						<el-button slot="append" icon="el-icon-search" @click="searchRoleTable"></el-button>
					</el-input>
					<!-- searchRoleTable是获取列表数据的方法-->
					<!--@keyup.enter.native是回车事件触发查询 -->
					<!--@clear是重置查询 ，该事件的触发，必须先设置清空(clearable)属性-->
					<!-- el-button中的@click，是点击按钮触发查询-->
				</el-form-item>
				<el-form-item>
					<!-- 绑定高级查询事件，调用抽屉插件展示查询信息-->
					<el-button type="primary" @click="openSearchDialog">
						高级查询
						<i class="el-icon-magic-stick"></i>
					</el-button>
				</el-form-item>
				<el-form-item style="float:right">
					<!-- 点击新增按钮，调用新增弹窗 -->
					<el-button @click="openRoleDialog" type="primary" plain>
						新增
						<i class="el-icon-plus"></i>
					</el-button>
				</el-form-item>
			</el-form>
			<!-- tabel表格 -->
			<div class="el-flex el-box-column">
				<el-table ref="roleTable" height="100%" style="width: 100%" border stripe :data="roleDatas">
					<el-table-column min-width="100px" sortable show-overflow-tooltip prop="roleCode" label="角色编码"></el-table-column>
					<el-table-column min-width="100px" sortable show-overflow-tooltip prop="roleName" label="角色名称"></el-table-column>
					<el-table-column min-width="100px" sortable show-overflow-tooltip prop="roleType" label="角色类型"></el-table-column>
					<el-table-column min-width="120px" sortable show-overflow-tooltip prop="roleDesc" label="角色描述"></el-table-column>
					<el-table-column min-width="100px" sortable show-overflow-tooltip prop="domainName" label="所属系统"></el-table-column>
					<el-table-column min-width="100px" sortable show-overflow-tooltip prop="createdByName" label="创建人" align="center"></el-table-column>
					<el-table-column sortable show-overflow-tooltip label="操作" align="center" fixed="right" width="160px">
						<template slot-scope="scope">
							<el-button class="td-btn-icon" type="text" title="修改角色" @click="openRoleEditDialog(scope.row)"><i class="el-icon-edit"></i></el-button>
							<el-button @click="routeRoleBindFun(scope.row.roleId)" class="td-btn-icon" type="text" title="授权功能"><i class="el-icon-medal"></i></el-button>
							<el-button class="td-btn-icon" type="text" title="删除角色" @click="delRoleRow(scope.row)"><i class="el-icon-delete"></i></el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页 -->
			<el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total" :page-size="pageSize"
			 :current-page="currentPage" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
		</div>
		<!-- 查询抽屉-->
		<el-drawer title="高级查询" :visible.sync="searchDialogVisible" direction="rtl" custom-class="demo-drawer">
			<div class="el-box-column" style="height: 100%;">
				<el-form :model="roleSearchForm" ref="roleSearchForm" label-width="100px" class="el-flex el-over-auto">
					<el-form-item label="角色名称" prop="roleName">
						<el-col :span="16">
							<el-input placeholder="请输入角色名称" v-model="roleSearchForm.roleName"></el-input>
						</el-col>
					</el-form-item>
					<el-form-item label="角色编码" prop="roleCode">
						<el-col :span="18">
							<el-input placeholder="请输入角色编码" v-model="roleSearchForm.roleCode"></el-input>
						</el-col>
					</el-form-item>
					<el-form-item label="所属系统" prop="domainId">
						<el-col :span="16">
							<el-select v-model="roleSearchForm.domainId" placeholder="请选择所属系统" clearable @change="domainChange">
								<el-option v-for="item in domainOPtions" :key="item.domainId" :label="item.domainName" :value="item.domainId">
								</el-option>
							</el-select>
							<input style="display: none;" v-model="roleSearchForm.domainName" />
						</el-col>
					</el-form-item>
					<el-form-item prop="domainName" v-show="false">
						<input v-model="roleSearchForm.domainName" />
					</el-form-item>
					<el-form-item label="角色描述" prop="roleDesc">
						<el-col :span="20">
							<el-input type="textarea" placeholder="请输入角色描述" v-model="roleSearchForm.roleDesc"></el-input>
						</el-col>
					</el-form-item>
				</el-form>
				<div style="text-align: right;margin-bottom: 10px;padding-right:10px;">
					<el-button type="primary" @click="advanceSearch">
						确定
						<i class="el-icon-document-checked el-icon--right"></i>
					</el-button>
					<el-button @click="resetSearch">
						重置
						<i class="el-icon-refresh-left"></i>
					</el-button>
				</div>
			</div>
		</el-drawer>
		<!-- 角色新增编辑弹窗 -->
		<el-dialog title="角色信息" :visible.sync="roleDialogVisible" :close-on-click-modal="false" :close-on-press-escape="false"
		 @close="roleDialogCloseEvt">
			<el-form :model="roleForm" ref="roleForm" label-width="100px">
				<el-form-item label="角色名称" prop="roleName" :rules="[
						{
							required: true,
							message: '角色名称不能为空'
						}
					]">
					<el-col :span="10">
						<el-input placeholder="请输入角色名称" v-model="roleForm.roleName"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="角色编码" prop="roleCode" :rules="[
						{
							required: true,
							message: '角色编码不能为空'
						}
					]">
					<el-col :span="12">
						<el-input :readonly="roleCodeReadonly" placeholder="请输入角色编码" v-model="roleForm.roleCode"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="角色类型" prop="roleType">
					<el-col :span="24">
						<el-radio-group v-model="roleForm.roleType">
							<el-radio label="一般管理员" border></el-radio>
							<el-radio label="普通角色" border></el-radio>
						</el-radio-group>
					</el-col>
				</el-form-item>
				<el-form-item label="所属系统">
					<el-select v-model="roleForm.domainId" placeholder="请选择所属系统">
						<el-option v-for="item in domainOPtions" :key="item.domainId" :label="item.domainName" :value="item.domainId">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="角色描述">
					<el-col :span="18">
						<el-input placeholder="请输入角色描述" type="textarea" v-model="roleForm.roleDesc"></el-input>
					</el-col>

				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="saveAndGiveFuncEvt">
					授权功能
					<i class="el-icon-medal el-icon--right"></i>
				</el-button>
				<el-button type="primary" @click="roleSaveEvt">
					保存
					<i class="el-icon-document-checked el-icon--right"></i>
				</el-button>
				<el-button type="danger" @click="roleDialogVisible = false">
					关闭
					<i class="el-icon-close"></i>
				</el-button>
			</div>
		</el-dialog>
	</el-card>
</template>
<script>
	import {
		Dialog, // 对话框
		Drawer, // 抽屉
		Table, // 表格
		TableColumn, // 表格列
		Pagination, // 分页
		MessageBox, // 弹框提示
		Message, //消息提示
	} from 'element-ui'

	import {
		getRoleList, //获取角色列表数据源
		putRole, //保存角色信息
		deleteRole, //删除角色
		getDomainAuth, //获取所属系统
	} from '@/api/authority/roleManage/roleManage.js';

	export default {
		components: {
			'el-dialog': Dialog, // 对话框
			'el-drawer': Drawer, // 抽屉
			'el-table': Table, // 表格
			'el-table-column': TableColumn, // 表格列
			'el-pagination': Pagination, // 分页
		},
		data() {
			//角色表单初始化默认值
			let roleInitVal = {
				domainId: '',
				domainName: '',
				roleCode: '',
				roleDesc: '',
				roleName: '',
			}
			return {
				total: 0, //总条数
				pageSize: 20, //每页展示条数
				currentPage: 1, //默认显示页数
				formSearch: {}, //查询参数
				searchType: 1, //查询模式，1模糊查询，2高级查询
				//角色高级查询条件
				roleSearchForm: JSON.parse(JSON.stringify(roleInitVal)),
				//角色表单默认值，用于重置表单
				roleInitVal: JSON.parse(JSON.stringify(roleInitVal)),
				//角色表单项-新增修改
				roleForm: JSON.parse(JSON.stringify(roleInitVal)),
				roleCodeReadonly: false, //角色编码是否只读
				domainOPtions: [],//所属系统数据源
				roleDatas: [],//表格数据源
				roleDialogVisible: false, //角色编辑弹窗
				searchDialogVisible: false, //高级查询弹窗
				funcCheckedIds: [], //选中的功能节点id合集
			}
		},
		methods: {
			/**
			 * @method domainChange 所属系统改变事件
			 * @param {string} val 当前选中的所属系统
			 */
			domainChange(val) {
				if (val) {
					this.domainOPtions.forEach(e => {
						if (e.domainId == val) {
							this.roleSearchForm.domainName = e.domainName
						}
					})
				} else {
					this.roleSearchForm.domainName = ""
				}
			},
			/**
			 * @method handleSizeChange 改变当前页条数
			 * @param {number} val 点击的页码
			 */
			handleSizeChange(val) {
				this.pageSize = val
				this.loadRoleTable() //刷新表格
			},
			/**
			 * @method handleCurrentChange 切换页数
			 * @param {number} val 当前页码
			 */
			handleCurrentChange(val) {
				this.currentPage = val
				this.loadRoleTable() //刷新表格
			},
			/**
			 * @method filterInvalid 过滤无效数据
			 * @param {object} dataSource 把为空的字段过滤掉
			 */
			filterInvalid(dataSource) {
				let validData = {}
				let jsonData = JSON.stringify(dataSource)
				for (let k in dataSource) {
					let data = dataSource[k]
					if (data != '' && data != null && data != undefined && jsonData != '{}' && jsonData != '[]') {
						validData[k] = data
					}
				}
				return validData
			},
			/**
			 * @method delRoleRow 删除角色(行)
			 * @param {object} row 当前点击的表格行数据
			 */
			delRoleRow(row) {
				MessageBox.confirm('您确定要删除这条数据吗?').then(() => {
					deleteRole(row.roleId).then(res => {
						if (res.data.code != 10000) return
						Message.success("删除成功") //成功提示
						this.loadRoleTable() //重新加载表格
					})
				})
			},
			/* 开启角色新增弹窗 */
			openRoleDialog() {
				this.roleDialogVisible = true
				this.roleCodeReadonly = false //新增时，角色编码可写
			},
			/* 开启角色编辑弹窗 */
			openRoleEditDialog(row) {
				this.roleDialogVisible = true
				this.roleCodeReadonly = true //编辑时，角色编码只读
				this.roleForm = JSON.parse(JSON.stringify(row))
			},
			/* 开启高级查询弹窗 */
			openSearchDialog() {
				this.searchDialogVisible = true
			},
			/* 角色弹窗关闭事件，主要用于清空表单和校验 */
			roleDialogCloseEvt() {
				this.$refs.roleForm.resetFields() //重置校验
				this.roleForm = JSON.parse(JSON.stringify(this.roleInitVal)) //重置为初始值
			},
			/* 角色保存事件 */
			roleSaveEvt() {
				this.$refs.roleForm.validate(valid => {
					if (!valid) return false
					let sendDatas = this.filterInvalid({
						roleId: this.roleForm.roleId,
						roleName: this.roleForm.roleName,
						roleCode: this.roleForm.roleCode,
						roleType: this.roleForm.roleType,
						domainId: this.roleForm.domainId,
						roleDesc: this.roleForm.roleDesc
					}) //过滤无效参数
					putRole(sendDatas).then(res => {
						if (res.data.code != 10000) return
						Message.success('角色保存成功') //成功提示
						this.roleDialogVisible = false //关闭编辑角色弹窗
						this.loadRoleTable() //刷新表格
					})
				})
			},
			/**
			 * @method routeRoleBindFun 跳转到角色绑定功能路由组件
			 * @param {string} roleId 当前点击行的角色主键字段，用于路由传值
			 */
			routeRoleBindFun(roleId) {
				//this.multiRouters是全局提供的自动添加多级路由的方法
				this.$router.addRoutes(this.multiRouters([{
					path: 'roleBindFun',
					name: 'roleBindFun', //自定义name名称
					component: () => import('@/views/authority/roleManage/roleBindFun'),
					meta: {
						title: '角色绑定功能'
					}
				}]))

				/* routerMatch方法为自动匹配路由框架
					根据跳转前页面的layout和frame，智能控制动态路由跳转的框架
					避免出现重复的路由嵌套，
					如想自己强制指定跳转路径，则不需调用该方法，遵循以下规则(name和path一样)：
					layout/frame/roleBindFun //顶部导航+侧边导航
					layout/roleBindFun //顶部导航
					frame/roleBindFun //侧边导航
					roleBindFun //独立页面
				 */
				this.$router.push(this.routerMatch({
					name: 'roleBindFun',
					params: {
						roleId: roleId //当前点击行的角色主键字段
					}
				}))
			},
			/* 保存角色功能的授权 */
			saveAndGiveFuncEvt() {
				this.$refs.roleForm.validate(valid => {
					if (!valid) return false
					let sendDatas = this.filterInvalid({
						roleId: this.roleForm.roleId,
						roleName: this.roleForm.roleName,
						roleCode: this.roleForm.roleCode,
						roleType: this.roleForm.roleType,
						domainId: this.roleForm.domainId,
						roleDesc: this.roleForm.roleDesc
					}) //过滤无效参数
					putRole(sendDatas).then(res => {
						if (res.data.code != 10000) return
						Message.success("角色保存成功，请授权功能") //成功提示
						this.roleDialogVisible = false //关闭角色新增弹窗
						this.loadRoleTable() //刷新表格
						this.roleForm.roleId = res.data.data
						setTimeout(() => {
							this.routeRoleBindFun(res.data.data) //跳转到角色绑定功能路由组件
						}, 0)
					})
				})
			},
			/**
			 * 普通查询
			 */
			searchRoleTable() {
				this.searchType = 1 //模糊查询模式
				this.loadRoleTable(1)//加载表格
			},
			/**
			 * 高级查询
			 */
			advanceSearch() {
				this.formSearch.fuzzyfield = ""//把模糊查询条件置为空
				this.searchType = 2 //高级查询模式
				this.loadRoleTable(1)//加载表格数据
			},
			/**
			 * 根据请求到的数据源，渲染角色表格
			 */
			loadRoleTable(page, size) {
				let sendDatas = {
					type: this.searchType//查询模式
				}
				if (this.searchType == 2) { //高级查询
					Object.assign(sendDatas, this.roleSearchForm)
					this.searchDialogVisible = false
				} else { //模糊查询
					let fuzzyfield = this.formSearch.fuzzyfield
					if (!fuzzyfield) {
						fuzzyfield = ' '
					}
					sendDatas.roleName = fuzzyfield
					sendDatas.roleCode = fuzzyfield
				}
				this.currentPage = page ? page : this.currentPage
				this.pageSize = size ? size : this.pageSize
				sendDatas.page = this.currentPage //当前页数
				sendDatas.size = this.pageSize //每页显示条数
				sendDatas = this.filterInvalid(sendDatas) //过滤无效数据
				getRoleList(sendDatas).then(res => {
					if (res.data.code != 10000) return
					this.total = res.data.data.total
					this.roleDatas = res.data.data.records
					setTimeout(() => {
						this.$refs.roleTable.doLayout() //重绘表格宽度，解决表头对不齐的问题
					}, 0)
				})
			},
			/* 高级查询重置事件 */
			resetSearch() {
				this.formSearch.fuzzyfield = ""
				this.$refs.roleSearchForm.resetFields() //重置校验
				this.loadRoleTable(1); //重新加载表格
				this.searchDialogVisible = false; //关闭查询抽屉
			},
			/* 获取系统下拉数据源 */
			getDomainItems() {
				getDomainAuth().then(res => {
					if (res.data.code != 10000) return
					this.domainOPtions = res.data.data
				})
			}
		},
		created() {
			this.loadRoleTable() //获取角色列表
			this.getDomainItems() //获取系统下拉项
			window.onresize = () => {
				this.$refs.roleTable.doLayout() //监听窗口变化，重绘表格布局
			}
		}
	}
</script>
